<template>
    <div class="template-detail">
            <Breadcrumb>
            <BreadcrumbItem to="/payroll/salary/settings/template">返回</BreadcrumbItem>
            <BreadcrumbItem to="/payroll/salary/settings/template">工资表模板 </BreadcrumbItem>
            <BreadcrumbItem>修改工资表模板</BreadcrumbItem>
        </Breadcrumb>
    <div class="step-section " >
      <div class="guide-intro">
        <div class="h">使用指南</div>
        <div class="desc">设置工资表模板，即对应企业计薪时的月工资表头项目。每位员工只适用一个模板，如员工每月分开核算不同项目，请按照完整的工资表项目进行设置。</div>
      </div>
      <div class="section">
        <div class="s-header flex">
          <h3>模板基本设置</h3>
          <a href="javscript:">展开</a>
        </div>
        <div class="section-content">
          <div class="content-desc">设置模板名称以及相关备注。</div>
          <div class="form-section">
            <Form :model="formItem" :label-width="154">
              <div class="form-item-row ">
                <FormItem label="模板名称" class="form-item">
                  <Input v-model="formItem.input" placeholder="工号" class="form-input"></Input>
                </FormItem>
               
              </div>
              <div class="form-item-row ">
                <FormItem label="关联考勤扣款规则" class="form-item">
                    <Input v-model="formItem.input" type="textarea" class="form-input" :rows="3"></Input>

                </FormItem>
             
              </div>
            </Form>
          </div>
        </div>
      </div>
      <div class="section">
        <div class="s-header flex">
          <h3>企业可选项</h3>
          <a href="javscript:">展开</a>
        </div>
        <div class="section-content">
          <div class="content-desc">选择企业工资表包含的所有工资项目类型，点击开关设置是否启用该项目类型，在下一步可以编辑具体的子项目。</div>
          <ul class="list">
            <li class="t-item">
              <div class="fake-table">
                <div class="f-t-header">
                  <div class="f-t-h-th">基本工资</div>
                  <div class="f-t-h-th">描述</div>
                  <div class="f-t-h-th">加/减项</div>
                  <div class="f-t-h-th">是否计税</div>
                  <div class="f-t-h-th action">操作</div>
                </div>
                <div class="f-t-tr">
                  <div class="t-t-tr-cell">星期一</div>
                  <div class="t-t-tr-cell ellipse">早晚 09:00~18:30;</div>
                  <div class="t-t-tr-cell">222</div>
                  <div class="t-t-tr-cell">222</div>
                  <div class="t-t-tr-cell action del">删除</div>
                </div>
                <div class="f-t-tr">
                  <div class="t-t-tr-cell">
                    <Dropdown>
                      <Button class="pierced-nobg">
                        <Icon type="ios-add" size="18" />添加工资项
                      </Button>
                      <DropdownMenu slot="list">
                        <DropdownItem>选项1</DropdownItem>
                      </DropdownMenu>
                    </Dropdown>
                  </div>
                  <div class="t-t-tr-cell ellipse">早晚 09:00~18:30;</div>
                  <div class="t-t-tr-cell">222</div>
                  <div class="t-t-tr-cell">222</div>
                  <div class="t-t-tr-cell action del">删除</div>
                </div>
              </div>
            </li>
            <li class="t-item">
              <div class="fake-table">
                <div class="f-t-header">
                  <div class="f-t-h-th">基本工资</div>
                  <div class="f-t-h-th">描述</div>
                  <div class="f-t-h-th">加/减项</div>
                  <div class="f-t-h-th">是否计税</div>
                  <div class="f-t-h-th action">操作</div>
                </div>
                <div class="f-t-tr">
                  <div class="t-t-tr-cell">星期一</div>
                  <div class="t-t-tr-cell ellipse">早晚 09:00~18:30;</div>
                  <div class="t-t-tr-cell">222</div>
                  <div class="t-t-tr-cell">222</div>
                  <div class="t-t-tr-cell action del">
                    删除
                    <i-switch />
                  </div>
                </div>
                <div class="f-t-tr">
                  <div class="t-t-tr-cell">
                    <Dropdown>
                      <Button class="pierced-nobg">
                        <Icon type="ios-add" size="18" />添加工资项
                      </Button>
                      <DropdownMenu slot="list">
                        <DropdownItem>选项1</DropdownItem>
                      </DropdownMenu>
                    </Dropdown>
                  </div>
                  <div class="t-t-tr-cell ellipse">早晚 09:00~18:30;</div>
                  <div class="t-t-tr-cell">222</div>
                  <div class="t-t-tr-cell">222</div>
                  <div class="t-t-tr-cell action del">删除</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- bottom -->
    <div class="bottom-btns-wrap">
      <div class="btns">
        <!-- <Button class="mr18 default-btn">取消</Button> -->
       
        <Button class="pierced mr12" @click="preview" >预览</Button>
        <Button class="save-btn-green" @click="save" >保存</Button>
      </div>
    </div>

    <!-- modal  -->
    <Modal v-model="modal2" width="720">
        <p slot="header" >
            模板预览
        </p>
        <div >
            <Table width="100%" :columns="columns"  class="table"></Table>
        </div>
        <p slot="footer"></p>
    </Modal>
    <!-- modal end -->
    </div>
</template>
<script>
export default {
    data(){
        return {
formItem: {
        input: ""
      },
      modal2:false,
       columns: [
        {
          title: "姓名",
          key: "name"
        },
        {
          title: "工号",
          key: "age"
        },
        {
          title: "部门",
          key: "province"
        },
        {
          title: "岗位",
          key: "city"
        },
        {
          title: "工作性质",
          key: "city"
        },
        {
          title: "成员姓名",
          key: "city"
        },
        {
          title: "成员关系",
          key: "city"
        },
        {
          title: "工作单位",
          key: "city"
        },

        {
          title: "操作",
          key: "action",
          width: 120,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "text",

                    className: "table-action-btn"
                  },
                  class: "table-action-btn",
                  on: {
                    click: () => {
                      this.openRightCard(params.index);
                    }
                  }
                },
                "快速编辑"
              )
            ]);
          }
        }
      ],
      company: [
        {
          title: "基本工资",
          desc: ["基本工资", "餐补"]
        },
        {
          title: "基本工资",
          desc: ["基本工资", "餐补"]
        },
        {
          title: "基本工资",
          desc: ["基本工资", "餐补"]
        },
        {
          title: "基本工资",
          desc: ["基本工资", "餐补"]
        },
        {
          title: "基本工资",
          desc: ["基本工资", "餐补"]
        },
        {
          title: "基本工资",
          desc: ["基本工资", "餐补", "餐补", "餐补"]
        }
      ]
        }
        
    },
    methods: {
        save(){
            this.$router.push("/payroll/salary/settings/template");
        },
         preview(){
        this.modal2 = true;
    }
    },
}
</script>
<style lang="scss" scoped src='../../index.scss'>
</style>